import { useTranslation } from 'react-i18next'
import { IconLanguage } from '@/assets/custom/icon-language'
import { useLanguage } from '@/context/language-provider'
import { Button } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'

export function LanguageSwitch() {
  const { t } = useTranslation()
  const { language, setLanguage, supportedLanguages } = useLanguage()

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          size='icon'
          variant='ghost'
          aria-label={t('theme.language')}
          className='rounded-full'
        >
          <IconLanguage
            language={language as 'en' | 'zh'}
            className='size-[1.2rem]'
          />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align='end'>
        {supportedLanguages.map((lang) => (
          <DropdownMenuItem
            key={lang.code}
            onClick={() => setLanguage(lang.code)}
            className={`cursor-pointer ${
              language === lang.code ? 'bg-accent' : ''
            }`}
          >
            <span className='flex items-center gap-2'>
              <span className='text-sm'>{lang.nativeName}</span>
              {language === lang.code && (
                <span className='text-muted-foreground text-xs'>
                  ({t('common.selected')})
                </span>
              )}
            </span>
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
